<ui:composition
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:fn="http://java.sun.com/jsp/jstl/functions">

    <script type="text/javascript" language="javascript" src="#{request.contextPath}/resources/js/jquery.countdown.js" />
    <script type="text/javascript" language="javascript" src="#{request.contextPath}/resources/js/jquery.countdown-es.js" />

    <script type="text/javascript">

        function serverTime() {
            var horaServer = new Date(${poolAplicacionBean.stringFechaServer});
            return horaServer;
        }

    </script>

    <h:panelGroup layout="block" rendered="#{fn:length(poolAplicacionBean.pooles)>0}"
                  style="padding-top: 3px;">

        <p:carousel value="#{poolAplicacionBean.pooles}" var="p" style="width: 980px;"
                autoPlayInterval="400"
                numVisible="1"
                vertical="true"
                circular="true">

        <f:facet name="header">
            Pooles Activos
        </f:facet>

        <h:panelGrid columns="1" style="width:972px;" cellpadding="5">

            <h:panelGroup layout="block" styleClass="poolInfo" >

                <div class="poolContador">

                    <script type="text/javascript">
                        $(function () {
                            var fechaFin = new Date(#{poolSessionBean.fechaFin(p)} );
                            $('#defaultCountdown#{p.nroPool}').countdown({until: fechaFin, serverSync: serverTime()});
                        });
                    </script>

                    <div style="height: 10px; margin-top: 1px;margin-bottom: 1px; font-weight: bold;" > Finaliza en </div>
                    <div id="defaultCountdown#{p.nroPool}" style="height: 55px; "></div>

                </div>

                <h:panelGroup layout="block" style="position: relative; width: 650px; float: left; height: 80px;" >

                    

                </h:panelGroup>

                <h:panelGroup layout="block" style="position: relative; width: 650px; float: left; height: 80px;" >



                </h:panelGroup>

                <h:panelGroup layout="block" style="position: relative; width: 650px; float: left; height: 80px;" >



                </h:panelGroup>


                <table border="0" cellspacing="0" cellpadding="0">
                       <tr>
                           <td width="640" height="25" style="font-size: 18px;" valign="middle">
                               
                           </td>

                           <td width="100" rowspan="3">

                               <p:commandLink  action="#{poolSessionBean.seleccionarPool(p)}"
                                               process="@this"
                                               rendered="#{p.activa}"
                                               ajax="false" >
                                   <p:graphicImage value="../resources/imagenes/boton-carrito.png" width="60" height="40" />
                                   <h:outputText value="Comprar"/>

                               </p:commandLink>

                           </td>

                           <td width="100"  rowspan="3">
                               <div class="countDownBoton">
                                   <p:commandLink action="../pool/basesCondiciones.xhtml" process="@this" ajax="false" >
                                       <p:graphicImage value="../resources/imagenes/info32.png" />
                                       <br/>
                                       <h:outputText value="Términos y Condiciones"/>
                                   </p:commandLink>
                               </div>
                           </td>
                       </tr>

                       <tr>
                           <td width="640" height="30" align="center" style="font-weight: bold;font-size: 25px;">

                               <p:idleMonitor timeout="9000" >
                                   <p:ajax event="idle" update="cantDisponible, porcentajeVenta" />
                               </p:idleMonitor>

                               <p:commandLink id="cantDisponible" action="#{poolSessionBean.seleccionarPool(p)}"
                                              process="@this" ajax="false" immediate="true"  >

                                   <h:outputText value="#{p.cantidadDisponible}"
                                                 style="margin: 10px;">
                                       <f:convertNumber pattern="0"/>
                                   </h:outputText>

                                   <h:outputText value="Unidades disponibles" />

                                   <p:effect type="pulsate" event="load" delay="1">
                                        <f:param name="mode" value="'show'" />
                                   </p:effect>

                               </p:commandLink>

                           </td>
                       </tr>

                       <tr>
                           <td width="640px" height="19" align="center" >

                               <p:progressBar id="porcentajeVenta"
                                      value="#{poolSessionBean.porcentajeFinalizadoPool(p)}" labelTemplate="{value}% Vendido"
                                      displayOnly="true" style="height: 15px; width: 320px; font-size: 10px;" >

                                   <p:effect type="shake" event="load" delay="1">
                                        <f:param name="mode" value="'show'" />
                                   </p:effect>

                               </p:progressBar>
                           </td>

                       </tr>

                   </table>

            </h:panelGroup>

        </h:panelGrid>

    </p:carousel>


    </h:panelGroup>

</ui:composition>
